<template>
	<div id="videoList">
			<iframe :src="getPlayerPath" ref="videoRender" style="width:69%; height:28vw;" frameborder="no" border="0"
			 marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
	</div>
</template>
<script>
	export default {
		name: 'app',
		components: {},
		data() {
			return {
				videoUrl: '',
				showVideoDialog: true, //控制在线监控实时流窗口的开关
				videoList: [],
				videoComponentList: [],
				currentPlayerInfo: {}, //当前播放对象
				updateLooper: 0, //数据刷新轮训标志
				videoHistory: {
					searchHistoryParam: "",
					searchHistoryResult: [], //媒体流历史记录搜索结果
				}
			};
		},
		computed: {
			getPlayerPath: function() {
				if (!this.showVideoDialog) { //防止出现流断开不彻底的问题
					return '';
				} else {
				  //悬挂摄像头
					return '/video/video.html?url=' + encodeURIComponent(this.$global.baseMediaUrl  + 'rtp/0BEBE883' + ".flv?st="+new Date().getTime());
          //摄像头
          //return '/video/video.html?url=' + encodeURIComponent(this.$global.baseMediaUrl  + 'rtp/0BEBE68E' + ".flv?st="+new Date().getTime());
				}
			},
		},
		mounted() {
			this.updateLooper = setInterval(this.initData, 10000);
		},
		destroyed() {
			this.$destroy('videojs');
			clearTimeout(this.updateLooper);
		},
		methods: {
			getSnap: function(streamInfo) {
				let videoUrl = this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream + ".flv";
				let snapUrl = videoUrl.replace(/^ws/, "http");
				let fullSnapRequest = this.$global.genApiUrl('/getSnap') + '&timeout_sec=10&expire_sec=30&url=' + snapUrl + "&st=" +
					new Date().getTime();
				return fullSnapRequest;
			},
		}
	};
</script>

<style scoped>
	.videoList {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.video-item {
		position: relative;
		width: 15rem;
		height: 10rem;
		margin-right: 1rem;
		background-color: #000000;
	}

	.video-item-img {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 100%;
	}

	.video-item-img:after {
		content: "";
		display: inline-block;
		position: absolute;
		z-index: 2;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 3rem;
		height: 3rem;
		background-image: url("../assets/loading.png");
		background-size: cover;
		background-color: #000000;
	}

	.video-item-title {
		position: absolute;
		bottom: 0;
		color: #000000;
		background-color: #ffffff;
		line-height: 1.5rem;
		padding: 0.3rem;
		width: 14.4rem;
	}

  #videoList{
    margin: 50px;
  }
</style>
